<template>
  <div class="c-w100 c-pt24">
    <div class="c-pv20" v-for="(item,index) in vcItemList" :key="index" @click="clickValuableCouponItem(item.Id)" v-if="itemType == 1">
      <div class="c-flex-row c-bg-white c-br16 c-text-hidden">
        <div class="c-ww240 c-maxh240 c-text-hidden c-p" :class="!isSetPageBackground ? 'c-br16' : ''">
          <img class="c-w100 c-h" :src="$addXossFilter(JSON.parse(item.productImage) ? JSON.parse(item.productImage)[0] : null, require('../../assets/defult270.png'))" alt="">
          <div class="c-fs16 c-fc-white c-ph4 c-hh24 c-br4 c-flex-row c-flex-center bg-black-opacity c-pa c-p-b10 c-p-r10">{{item.type == 1 ? '兑换券' : item.type == 2 ? '无门槛券' : item.type == 3 ? '满减券' : item.type == 4 ? '抵价券' : item.type == 5 ? '折扣券' : ''}}</div>
        </div>
        <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-ml20" :class="isSetPageBackground ? 'c-pv20 c-pr10' : ''">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-fw-b">{{item.productName}}</div>
          <div class="c-fs22 c-fc-gray c-mt10 c-text-ellipsis1">{{item.type == 1 ? item.name : item.type == 4 ? '适用于预约师资功能' : item.redeemType == 26 ? '全店商品可用' : (item.redeemType == 25 ? '适用于商城商品' : item.redeemType == 27 ? ('适用于' + (item.prodTypes ? item.prodTypes.join('、') : '')) : '指定商品可用')}}</div>
          <div class="c-fs22 c-fc-gray c-mt10">
            {{item.type == 1 ? '兑换商品' : item.type == 4 ? '抵扣全额' : item.type == 5 ? (Number(item.amount) > 0 ? '满'+Number(item.amount)+'元可用' : '无使用门槛') : (Number(item.amount) > 0 ? '满'+Number(item.amount)+'元可用' : '无使用门槛')}}
          </div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-mt10">
            <div class="c-fs24 theme-fc c-fw-b"><span v-if="item.productPrice > 0">{{'￥' | iosPriceFilter}}</span>{{Number(item.productPrice).toFixed(2) | moneyStr}}</div>
            <div class="c-fs20 c-fc-white c-ww110 c-hh40 c-flex-row c-flex-center c-br20 theme-bg">去抢购</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showMore" class="c-fs20 c-textAlign-c c-pv16" :class="pageTextColor ? 'pageTextColor' : 'c-fc-sblack'" @click="clickMore">查看更多 <span class="icon iconfont">&#xe836;</span></div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { COUPON_SCOPE_MAP } from "@/utils/constant.js";
let couponScopeMap = COUPON_SCOPE_MAP;
export default {
  name: "valuableCouponItem",
  components: {},
  //props: ["item"],
  props: {
    item: {
      type: Object,
      default: null,
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          // priceVisible:true, // 价格、商品价格
          // originalPriceVisible:true, // 划线价格
          // dataVisible:true, // 商品数据、数据字段、数据
          // statusVisible:true, // 状态
          // forecastVisible:true, // 预告时间
          // qrVisible:true, // 预告二维码
          // vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    };
  },
  computed: {
    vcItemList() {
      let vcItemList = this.itemList;
      if (vcItemList && vcItemList.length > 0) {
        for (let j = 0; j < vcItemList.length; j++) {
          vcItemList[j].prodTypes = vcItemList[j].prodTypes ? vcItemList[j].prodTypes.split(",") : '';
          if (vcItemList[j].prodTypes && vcItemList[j].prodTypes.length > 0) {
            for (let i = 0; i < vcItemList[j].prodTypes.length; i++) {
              vcItemList[j].prodTypes[i] = couponScopeMap[vcItemList[j].prodTypes[i]];
            }
          }
        }
      }
      return vcItemList;
    },
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickValuableCouponItem(cId) {
      let toPath = `/member/myExchange/valuableCoupon?id=${cId}`;
      this.iosAppRouteChange(toPath);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg-black-opacity{
  background: rgba(0,0,0,0.5);
}
</style>
